<template>
  <div class="conent_wrap">
    <!-- 左边效果区域 -->
    <div class="livePage">
      <live-page :pageJson="pageJson" ref="livePage"></live-page>
    </div>
    <!-- 右边编辑区域 -->
    <div class="editorPage">
      <form-page
        :pageJson="pageJson"
        @start="start"
        :readOnly="readOnly"
      ></form-page>
    </div>
  </div>
</template>
<script>
import livePage from "@views/menuPage/marketing/lottery/components/pageStyle/livePage.vue";
import formPage from "@views/menuPage/marketing/lottery/components/pageStyle/formPage.vue";
export default {
  name: "pageStyle",
  components: {
    livePage,
    formPage,
  },
  props: {
    formData: {
      type: Object,
      required: true,
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    pageJson() {
      return this.formData.pageJson;
    },
  },
  data() {
    return {
      // pageJson: {
      //   styleType: 2, // 1系统样式  2自定义
      //   shareBtnshow: 1, // 分享按钮1 展示   0隐藏
      //   shareBtnText: "告诉好友", // 分享按钮文案
      //   goShopBtnShow: 1, //进入店铺 1 展示   0隐藏
      //   goShopBtnText: "进入店铺", // 进入店铺按钮文案
      //   activetyName: "惊喜拆盲盒", //活动名称
      //   activetyDesc: "奖品多 价值高 拆盲盒 更惊喜", //活动描述
      //   residueNum: 1, //剩余次数 1 展示   0隐藏
      //   BoxNum: 6, //盲盒数量 4：4盒   6：6盒   9： 9盒
      //   boxList: [
      //     "拆神秘盲盒",
      //     "拆神秘盲盒",
      //     "拆神秘盲盒",
      //     "拆神秘盲盒",
      //     "拆神秘盲盒",
      //     "拆神秘盲盒",
      //     "拆神秘盲盒",
      //     "拆神秘盲盒",
      //     "拆神秘盲盒",
      //   ], //盲盒文案
      //   giftPoolShow: 1, //奖品池 1展示 0 隐藏
      //   giftPoolName: "奖品池", //奖品池名称
      //   myPrizeShow: 1, //我的奖品 1展示 0 隐藏
      //   myPrizeName: "我的奖品", //我的奖品名称
      //   activetyRuleShow: 1, //活动规则 1展示 0 隐藏
      //   activetyRuleText: "活动规则", // 活动规则名称
      //   activetyRuleDesc: "欢迎参加抽奖活动，如有任何问题可联系官方客服！", //活动规则描述
      //   drawBtnShow: 1, //悬浮获取抽奖按钮 1展示 0 隐藏
      //   drawBtnText: "获取抽奖机会", // 悬浮获取抽奖按钮名称
      //   //自定义
      //   bannerImageUrl: "", //背景图
      //   bannerType: 1, //1系统样式 2自定义
      //   //分享按
      //   shareImageUrl: "", //分享按钮图片
      //   sharebtnType: 1, //分享按钮1系统样式 2自定义
      //   shareBtnColor: "#ffffff", //分享按钮字体颜色
      //   sharefontSize: 8, //分享按钮字体颜色
      //   sharefontWeight: "bold", //分享按钮字体粗细
      //   //进入店铺
      //   goShopImageUrl: "", //进入店铺按钮图片
      //   goShopbtnType: 1, //进入店铺按钮1系统样式 2自定义
      //   goShopBtnColor: "#ffffff", //进入店铺按钮字体颜色
      //   goShopfontSize: 8, //进入店铺按钮字体颜色
      //   goShopfontWeight: "bold", //进入店铺按钮字体粗细
      //   //活动名称
      //   activetyNameColor: "#ffffff", //活动名称字体颜色
      //   activetyNamefontSize: 40, //活动名称字体大小
      //   activetyNamefontWeight: "bold", //活动名称字体粗细
      //   //活动描述
      //   activetyDescColor: "#ffffff", //活动描述字体颜色
      //   activetyDescfontSize: 14, //活动描述字体大小
      //   activetyDescfontWeight: "bold", //活动描述字体粗细
      //   activetyDescBordercolor: "#cfa56d", //活动描述底框颜色
      //   activetyDescAngelType: "1", //活动描述底框倒角 0直角 1倒角
      //   //剩余次数
      //   residueNumColor: "#bfbfbf", //剩余次数字体颜色
      //   residueNumfontSize: 12, //剩余次数字体大小
      //   residueNumfontWeight: "normal", //剩余次数字体粗细
      //   residueNumBordercolor: "#383838", //剩余次数底框颜色
      //   residueNumAngelType: "0", //剩余次数底框倒角 0直角 1倒角
      //   //盲盒自定义
      //   BoxImgUrl: "", //盲盒自定义图片
      //   BoxStyleType: 1, //盲盒自定义类型1系统样式 2自定义
      //   BoxColor: "#ffffff", //盲盒自定义字体颜色
      //   BoxfontSize: 14, //盲盒自定义字体大小
      //   BoxfontWeight: "bold", //盲盒自定义字体粗细
      //   BoxBordercolor: "#383767", //盲盒自定义底框颜色
      //   BoxAngelType: "1", //盲盒自定义底框倒角 0直角 1倒角
      //   //奖品池
      //   giftPoolColor: "#ffffff", //奖品池字体颜色
      //   giftPoolfontSize: 16, //奖品池字体大小
      //   giftPoolfontWeight: "bold", //奖品池字体粗细
      //   poolTitleColor: "#c0a27b", //标题底框颜色
      //   poolAngelType: "1", //奖品池底框倒角 0直角 1倒角
      //   poolTextColor: "#3d3d4e", //奖品池内容底框颜色
      //   pooltextAngelType: "1", //奖品池内容底框倒角 0直角 1倒角
      //   //中奖轮播
      //   prizeCarousel: 1, //中奖轮播 1展示 0隐藏
      //   prizeColor: "#ffffff", //中奖轮播字体颜色
      //   prizefontSize: 14, //中奖轮播字体大小
      //   prizefontWeight: "bold", //中奖轮播字体粗细
      //   prizeBordercolor: "#c8505c", //中奖轮播底框颜色
      //   prizeAngelType: "1", //中奖轮播底框倒角 0直角 1倒角
      //   //我的奖品
      //   awardColor: "#ffffff", //我的奖品字体颜色
      //   awardfontSize: 16, //我的奖品字体大小
      //   awardfontWeight: "bold", //我的奖品字体粗细
      //   awardTitleColor: "#c0a27b", //我的奖品标题底框颜色
      //   awardAngelType: "1", //我的奖品底框倒角 0直角 1倒角
      //   awardTextColor: "#3d3d4e", //我的奖品内容底框颜色
      //   awardTextAngelType: "1", //奖品池内容底框倒角 0直角 1倒角
      //   //活动规则标题
      //   ruleTitleColor: "#ffffff", //活动规则标题字体颜色
      //   ruleTitlefontSize: 16, //活动规则标题字体大小
      //   ruleTitlefontWeight: "bold", //活动规则标题字体粗细
      //   ruleTitlebgColor: "#c0a27b", //活动规则标题底框颜色
      //   ruleTitleAngelType: "1", //活动规则标题底框倒角 0直角 1倒角
      //   //活动规则内容
      //   ruleTextColor: "#ffffff", //活动规则内容字体颜色
      //   ruleTextfontSize: 12, //活动规则内容字体大小
      //   ruleTextfontWeight: "bold", //活动规则内容字体粗细
      //   ruleTextbgColor: "#3d3d4e", //活动规则内容标题底框颜色
      //   ruleTextAngelType: "1", //活动规则内容底框倒角 0直角 1倒角
      //   drawtColor: "#ffffff", //悬浮获取抽奖按钮字体颜色
      //   drawfontSize: 16, //悬浮获取抽奖按钮字体大小
      //   drawfontWeight: "bold", //悬浮获取抽奖按钮字体粗细
      //   drawbgColor: "#c8505c", //悬浮获取抽奖按钮标题底框颜色
      //   drawAngelType: "1", //悬浮获取抽奖按钮底框倒角 0直角 1倒角
      //   //高级设置
      //   //中奖实物效果弹窗
      //   winningPrizeType: 1, //中奖实物效果类型1系统样式 2自定义
      //   winningPrizeImgUrl: "", //中奖实物效果地址
      //   //未中奖效果弹窗
      //   noWinningType: 1, //未中奖实物效果类型1系统样式 2自定义
      //   noWinningImgUrl: "", //中奖实物效果地址
      //   //积分展示图
      //   integralType: 1, //积分展示图效果类型1系统样式 2自定义
      //   integralImgUrl: "", //积分展示图地址
      //   //优惠券展示图
      //   couponType: 1, //积分展示图效果类型1系统样式 2自定义
      //   couponImgUrl: "", //优惠券展示图地址
      //   //分享样式海报图
      //   posterType: 1, //海报图类型1系统样式 2自定义
      //   posterImgUrl: "", //海报图地址
      //   posterText: "惊喜盲盒快来猜，数量有限先到先得", //分享海报文案
      // },
    };
  },
  methods: {
    start(type) {
      this.$refs.livePage.go(type);
    },
  },
};
</script>
<style scoped lang="less" rel="stylesheet/less">
.conent_wrap {
  width: 100%;
  height: calc(100vh - 109px);
  display: flex;
  justify-content: space-around;
  .livePage {
    width: 385px;
  }
  .editorPage {
    width: 385px;
    // background: #fafafa;
  }
}
</style>
